<template>
  <scroll-view :scroll-y="true" class="h-11/12 m-auto w-11/12">
    <uni-forms :modelValue="formData">
      <!-- 使用部门 -->
      <uni-card title="使用部门" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.shiYongBuMen" />
        </uni-forms-item>
      </uni-card>
      <!-- 使用中的食品添加剂名称 -->
      <uni-card title="使用中的食品添加剂名称" extra="必填*">
        <uni-forms-item>
          <uni-easyinput
            v-model="formData.shiYongZhongDeShiPinTianJiaJiMingCheng"
          />
        </uni-forms-item>
      </uni-card>
      <!-- 制备的食品品种 -->
      <uni-card title="制备的食品品种" extra="必填*">
        <uni-forms-item>
          <uni-easyinput
            type="textarea"
            v-model="formData.zhiBeiDeShiPinPinZhong"
          />
        </uni-forms-item>
      </uni-card>
      <!-- 规定使用量 -->
      <uni-card title="规定使用量" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.guiDingShiYongLiang" />
        </uni-forms-item>
      </uni-card>
      <!-- 填报人姓名 -->
      <uni-card title="填报人姓名" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.tianBaoRenXingMing" />
        </uni-forms-item>
      </uni-card>
    </uni-forms>
    <ConfigComponent
      @clearFormData="clearFormData"
      @updateFormData="updateFormData"
      :formData="formData"
      name="tianJiaJiQingDan"
    />
  </scroll-view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import ConfigComponent from '@/components/ConfigComponent/ConfigComponent.vue';

// 表格提交信息
// 表格提交信息
const formData = ref({
  shiYongBuMen: '', // 使用部门
  shiYongZhongDeShiPinTianJiaJiMingCheng: '', // 使用中的食品添加剂名称
  zhiBeiDeShiPinPinZhong: '', // 制备的食品品种
  guiDingShiYongLiang: '', // 规定使用量
  tianBaoRenXingMing: '', // 填报人姓名
});

// 清空表单数据
const clearFormData = () => {
  formData.value = {
    shiYongBuMen: '', // 使用部门
    shiYongZhongDeShiPinTianJiaJiMingCheng: '', // 使用中的食品添加剂名称
    zhiBeiDeShiPinPinZhong: '', // 制备的食品品种
    guiDingShiYongLiang: '', // 规定使用量
    tianBaoRenXingMing: '', // 填报人姓名
  };
};
// 更新表单数据
const updateFormData = (data: any) => {
  formData.value = data;
};
</script>

<style lang="scss" scoped>
::v-deep.uni-card {
  .uni-card__header {
    .uni-card__header-extra {
      .uni-card__header-extra-text {
        color: #ff0000;
      }
    }
  }
}
</style>
